<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>运行状态</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
      <section class="chart-container">
        <el-row>
          <el-col :span="8">
            <el-card :body-style="{ padding: '0px' }"> 
              <div style="padding: 14px;">
                  <el-alert  title="任务数量"  type="success" :closable="false"> </el-alert>
<!--                 <div class="bottom clearfix">
                  {{ indexCountData.jobInfoCount }}
                </div> -->
                <el-alert  title='' type="success" :closable="false"> {{ indexCountData.jobInfoCount }}</el-alert>
                <el-alert  title="调度中心运行的任务数量"  type="success" :closable="false"> </el-alert>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card :body-style="{ padding: '0px' }">
              <div style="padding: 14px;">
                 <el-alert  title="调度次数"  type="success" :closable="false"> </el-alert>
<!--                 <div class="bottom clearfix">
                  {{ indexCountData.jobLogCount}}(成功率:{{ (indexCountData.jobLogSuccessCount/indexCountData.jobLogCount).toFixed(2)}})
                </div> -->
                <el-alert  title='' type="success" :closable="false"> {{ indexCountData.jobLogCount}}(成功率:{{ (indexCountData.jobLogSuccessCount/indexCountData.jobLogCount).toFixed(2)}})</el-alert>
                <el-alert  title="调度中心触发的调度次数"  type="success" :closable="false"> </el-alert>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card :body-style="{ padding: '0px' }">
              <div style="padding: 14px;">
                <el-alert  title="执行器数量"  type="success" :closable="false"> </el-alert>
                <el-alert  title='' type="success" :closable="false"> {{ indexCountData.executorCount }}</el-alert>
                <el-alert  title="调度中心在线的执行器机器数量"  type="success" :closable="false"> </el-alert>
              </div>
            </el-card>
          </el-col>
		</el-row>
       
        <el-row type="flex" justify="end" :gutter="2">
        	<el-col :span="24">
        	<el-alert title="调度报表" type="info" :closable="false" style="front-size: 18px"></el-alert>
        	</el-col>
           <el-col :span="2">
			<el-dropdown :hide-on-click="true" @command="handleCommand">
			  <span class="el-dropdown-link">
			  <el-tag type="success" style="height: 36px;line-height: 36px"><i class="el-icon-date"></i></el-tag>
			  </span>
			  <el-dropdown-menu slot="dropdown">
			    <el-dropdown-item  v-for="item of timePeriod" :key='item.id' :command=item.value>{{item.label}}</el-dropdown-item>
			  </el-dropdown-menu>
			</el-dropdown>
			</el-col>
        </el-row>


          <el-col :span="14">
            <div id="chartLine" style="width:100%; height:400px;"></div>
          </el-col>
          <el-col :span="10">
            <div id="chartPie" style="width:100%; height:400px;"></div>
          </el-col>

      </section>

    </el-col>
  </el-row>
</template>
<script>
  import echarts from 'echarts'
  import API from '../api/api_stat'
  import qs from 'qs'
  import moment from 'moment'

  export default {
    data() {
      return {
      	loading:false,
		timePeriod:[],
		timeChose:[],
		indexCountData:'',
		chartInfoData:'',


        chartColumn: null,
        chartBar: null,
        chartLine: null,
        chartPie: null,
        startDate: '2018-07-30 00:00:00',
		endDate: '2018-08-30 23:59:59',
      };
    },
    methods: {
    	handleSearch(){
    	this.loading = true;
        this.indexCount();
        this.chartInfo();
        this.initTimeRange();
      	},
      	initTimeRange:function(){
      		// this.timePeriod=new Map();
      		this.timePeriod.push({id:'01',label:" 今    天 ",value:[moment().startOf('day'), moment().endOf('day')]})
      		this.timePeriod.push({id:'02',label:" 昨    天 ",value:[moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')]})
      		this.timePeriod.push({id:'03',label:" 本    月 ",value:[moment().startOf('month'), moment().endOf('month')]})
      		this.timePeriod.push({id:'04',label:"上个月",value:[moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')]})
      		this.timePeriod.push({id:'05',label:"最近一周",value:[moment().subtract(1, 'weeks').startOf('day'), moment().endOf('day')]})
      		this.timePeriod.push({id:'06',label:"最近一月",value:[moment().subtract(1, 'months').startOf('day'), moment().endOf('day')]})	
       	},
      handleCommand(command) {
      	this.startDate=moment(command[0]).format("YYYY-MM-DD HH:mm:ss")
      	this.endDate=moment(command[1]).format("YYYY-MM-DD HH:mm:ss")
        this.chartInfo()
      },
    	      //获取统计数据
      indexCount: function () {
      let that = this;
      API.indexCount().then(function (result) {
        that.loading = false;
        if (result && result.content) {
			that.indexCountData=result.content
			// console.log("--"+that.indexCountData.jobInfoCount)
        }
      }, function (err) {
        that.loading = false;
        that.$message.error({showClose: true, message: err.toString(), duration: 2000});
      }).catch(function (error) {
        that.loading = false;
        console.log(error);
        that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
      }); 
      },
      // 获取统计图表数据
      chartInfo: function () {
      let that = this;
  		let params = {
        startDate: that.startDate,
        endDate: that.endDate,
      };
      console.log(params)
      API.chartInfo(qs.stringify(params)).then(function (result) {
        that.loading = false;
        if (result && result.content) {
			that.chartInfoData=result.content
			        that.drawChartLine();
        		that.drawChartPie();
        }
      }, function (err) {
        that.loading = false;
        that.$message.error({showClose: true, message: err.toString(), duration: 2000});
      }).catch(function (error) {
        that.loading = false;
        console.log(error);
        that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
      }); 
      },

      drawChartLine:function(){
      	// console.log("drawChartLine"+this.chartInfoData.triggerDayCountSucList)
      this.chartLine = echarts.init(document.getElementById('chartLine'));
      this.chartLine.setOption({
        title: {
          text: 'Line Chart'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ["成功", "失败","进行中"]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartInfoData.triggerDayList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '成功',
            type: 'line',
            stack: '总量',
            data: this.chartInfoData.triggerDayCountSucList
          },
          {
            name: '失败',
            type: 'line',
            stack: '总量',
            data: this.chartInfoData.triggerDayCountFailList
          },
          {
            name: '进行中',
            type: 'line',
            stack: '总量',
            data: this.chartInfoData.triggerDayCountRunningList
          }
        ]
      });

      },

      drawChartPie:function(){
      	// console.log("drawChartPie"+this.chartInfoData.triggerCountSucTotal)
      this.chartPie = echarts.init(document.getElementById('chartPie'));
      this.chartPie.setOption({
        title: {
          text: 'Pie Chart',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ["成功", "失败","进行中"]
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: this.chartInfoData.triggerCountSucTotal, name: '成功' },
              { value: this.chartInfoData.triggerCountFailTotal, name: '失败' },
              { value: this.chartInfoData.triggerCountRunningTotal, name: '进行中' },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
      }

    },
    mounted: function () {
    	this.handleSearch();
    }
  }
</script>


<style>
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .chart-container {
    width: 100%;
  }
  .chart-container .el-col {
    padding: 30px 20px;
  }
</style>
